@extends('home/myhouse/layout')
@section('title','商品评论')
@section('content')
    <script type="text/javascript" src="/home/js/comment_min_.js"></script>
    <script type="text/javascript" src="/home/js/comment.js"></script>
    <style type="text/css">
        *{margin:0;padding:0;list-style-type:none;}
        a,img{border:0;}
        body{font:12px/180% Arial, Helvetica, sans-serif;}
        /*quiz style*/
        .quiz{border:solid 1px #ccc;height:270px;width:772px;}
        .quiz h3{font-size:14px;line-height:35px;height:35px;border-bottom:solid 1px #e8e8e8;padding-left:20px;background:#f8f8f8;color:#666;position:relative;}
        .quiz_content{padding-top:10px;padding-left:20px;position:relative;height:205px;}
        .quiz_content .btm{border:none;width:100px;height:33px;background:#F8F8F8 no-repeat;margin:10px 0 0 64px;display:inline;cursor:pointer;}
        .quiz_content li.full-comment{position:relative;z-index:99;height:41px;}
        .quiz_content li.cate_l{height:24px;line-height:24px;padding-bottom:10px;}
        .quiz_content li.cate_l dl dt{float:left;}
        .quiz_content li.cate_l dl dd{float:left;padding-right:15px;}
        .quiz_content li.cate_l dl dd label{cursor:pointer;}
        .quiz_content .l_text{height:120px;position:relative;padding-left:18px;}
        .quiz_content .l_text .m_flo{float:left;width:47px;}
        .quiz_content .l_text .text{width:634px;height:109px;border:solid 1px #ccc;}
        .quiz_content .l_text .tr{position:absolute;bottom:-18px;right:40px;}
        /*goods-comm-stars style*/
        .goods-comm{height:41px;position:relative;z-index:7;}
        .goods-comm-stars{line-height:25px;padding-left:12px;height:41px;position:absolute;top:0px;left:0;width:400px;}
        .goods-comm-stars .star_l{float:left;display:inline-block;margin-right:5px;display:inline;}
        .goods-comm-stars .star_choose{float:left;display:inline-block;}
        /* rater star */
        .rater-star{position:relative;list-style:none;margin:0;padding:0;background-repeat:repeat-x;background-position:left top;float:left;}
        .rater-star-item, .rater-star-item-current, .rater-star-item-hover{position:absolute;top:0;left:0;background-repeat:repeat-x;}
        .rater-star-item{background-position: -100% -100%;}
        .rater-star-item-hover{background-position:0 -48px;cursor:pointer;}
        .rater-star-item-current{background-position:0 -48px;cursor:pointer;}
        .rater-star-item-current.rater-star-happy{background-position:0 -25px;}
        .rater-star-item-hover.rater-star-happy{background-position:0 -25px;}
        .rater-star-item-current.rater-star-full{background-position:0 -72px;}
        /* popinfo */
        .popinfo{display:none;position:absolute;top:30px;background:url(/home/images/infobox-bg.gif) no-repeat;padding-top:8px;width:192px;margin-left:-14px;}
        .popinfo .info-box{border:1px solid #f00;border-top:0;padding:0 5px;color:#F60;background:#FFF;}
        .popinfo .info-box div{color:#333;}
        .rater-click-tips{font:12px/25px;color:#333;margin-left:10px;background:url(/home/images/infobox-bg-l.gif) no-repeat 0 0;width:125px;height:34px;padding-left:16px;overflow:hidden;}
        .rater-click-tips span{display:block;background:#FFF9DD url(/home/images/infobox-bg-l-r.gif) no-repeat 100% 0;height:34px;line-height:34px;padding-right:5px;}
        .rater-star-item-tips{background:url(/home/images/star-tips.gif) no-repeat 0 0;height:41px;overflow:hidden;}
        .cur.rater-star-item-tips{display:block;}
        .rater-star-result{color:#FF6600;font-weight:bold;padding-left:10px;float:left;}
    </style>
    <center>
        <form action="/comment/take/show" method="post">
        <div class="quiz">
            <h3>我要评论</h3>
            <div class="quiz_content">
                    {{csrf_field()}}
                    <div class="goods-comm">
                        <div class="goods-comm-stars">
                            <span class="star_l">满意度：</span>
                            <div id="rate-comm-1" class="rate-comm"></div>
                        </div>
                    </div>

                    <div class="l_text">
                        <label class="m_flo">内  容：</label>
                        <textarea name="content" class="text"></textarea>
                        <input type="hidden" name="score" id="score" value="">
                        <input type="hidden" name="pro_id"  value="2">
                        <span class="tr">字数限制为5-200个</span>
                    </div>
                    <button class="btm">提交</button>
            </div><!--quiz_content end-->
        </div><!--quiz end-->
        </form>
    </center>

    <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
    </div>
    <script>
        $(function(){
            //获取星星的个数
            $("li").click(function(){
                var score = $(this).index();
                $('#score').val(score);
            });
            $('.btm').click(function(){
                if($('.text').val() == "" || $('#score').val()==""){
                    $('.btm').attr('disabled','disabled');
                    $(".btm").removeAttr("disabled");
                    alert('评价和评分都不能为空！');
                }else
                {
                    $(".btm").removeAttr("disabled");
                }
            });
        });
    </script>

@endsection